<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="18">
          <el-row>
            <el-col :span="18">
              <el-form-item label="名称:" prop="paperName">
                {{form.paperName}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="时长:" prop="duration">
                {{form.duration}}分钟
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="总分:" prop="paperScore">
                {{form.paperScore}}
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <Face :paperId="this.paperId" v-if="this.faceShow"></Face>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
         <ExamVideo :paperId="this.paperId" v-if="this.examVideoShow"></ExamVideo>
        </el-col>
      </el-row>
        <el-row>
          <el-col :span="18">
            <el-card>
            <el-row :key="index"  v-for="(group,index) in form.groups">
              <el-row>
                <el-col :span="24">
                  <el-form-item >
                    {{group.groupName}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                <el-form-item :label="(questonIndex+1)+'：'" :key="questonIndex" v-for="(question,questonIndex) in group.questions" style="margin-left:50px" >
                  <el-col :span="20">
                    <el-card> 
                      <a :id="'q'+index+'_'+(questonIndex)"></a>
                      <ExamQuestion :questionType="question.questionType" :question="question"/>
                    </el-card>
                  </el-col>
                </el-form-item>
              </el-row>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="6">
            <!--答题卡卡片-->
            <el-card>
              <div>
                <p >答题卡</p>
                <div style="margin-top: 25px">
                  <span class="span-noanswer">未作答</span>
                  <span class="span-answer">已作答</span>
                </div>
              </div>
              <!--答题卡-->
              <div class="question-card" :key="index"  v-for="(group,index) in form.groups">
                <p>试题列表{{index+1}}</p>
                <el-button size="mini"
                           :class="getQuestionClass(question)"
                           @click="scrollToQuetion(index,questionIndex)"
                           v-for="(question,questionIndex) in group.questions" :key="questionIndex">{{ questionIndex+1 }}
                </el-button>
              </div>
              <div class="question-card">
                <span class="examTitle" v-if="form.paperType!=2">距离考试结束还有：</span>
                <span style="color: red;font-size: 18px;" v-if="form.paperType!=2">{{ countdownTime }}</span>
                <br/>
                <el-button type="warning" round
                          class="submit-paper"
                          @click="submitForm">提交试卷
                </el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
  </div>
</template>

<script>
import { getExamInfo,submitPaper} from "@/api/paper/paper";
import ExamQuestion from "../question/examQuestion";
import Face from "./face";
import ExamVideo from "./examvideo";

export default {
  name: "Exam",
  components: { ExamQuestion,Face,ExamVideo },
  dicts: ['question_type','paper_status','paper_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      countdownTime: '',
      timerId: null,
      paperId: null,
      faceShow: false,
      examVideoShow: false,
      // 表单参数
      form: {},
    };
  },
  created() {
    const id = this.$route.params && this.$route.params.id;
    this.paperId = id;
    if(id) {
      getExamInfo(id).then(response => {
        this.form = response.data;
        if(!this.form.groups){
          this.form.groups=[{ groupName:''}];
        }
        if(!this.form.grades){
          this.form.gradeUsers = [];
        }
        if(this.form.paperType!='2'){
          this.countdown(this.form.endTime);
        }
        if(this.form.patterns){
          this.form.patterns.split(",").forEach(pattern=>{
            if(pattern=='2'){
              this.faceShow = true;
            }
            if(pattern=='1'||pattern=='3'){
              this.examVideoShow = true;
            }
          });
        }
      }); 
    }
  },
  methods: {
     /** 交卷 */
     submitForm() {
      const id = this.$route.params && this.$route.params.id;
      this.$refs["form"].validate(valid => {
        if (valid) {
          
        }
      });

      submitPaper(id,this.form).then(response => {
        this.$modal.msgSuccess("提交试卷成功");
        if(this.form.paperType=='0'||this.form.paperType=='2'){
          const obj = { path: "/exam/recordInfo/paper/" + id };
          this.$tab.closeOpenPage(obj);
        }
      });
    },
    getQuestionClass(question){
      let questionClass = 'question-noanswer';
      let questionType = question.questionType;
      if(questionType=='0'||questionType=='1'||questionType=='11'){
        question.options.forEach(option => {
          if(option.answerFlag==true){
            questionClass = 'question-answer';
          }
        });
      }else if(questionType>='2'&&questionType<='6'){
        question.answers.forEach(answer => {
          if(answer.examneeAnswer!==''){
            questionClass = 'question-answer';
          }
        });
      }else if(questionType=='7'){
        question.choices.forEach(choice => {
          if(choice.examneeAnswer!==''){
            questionClass = 'question-answer';
          }
        });
      }else if(questionType=='8'||questionType=='9'){
        question.questions.forEach(question => {
         question.options.forEach(option=>{
          if(option.answerFlag==true){
            questionClass = 'question-answer';
          }
         })
        });
      }else if(questionType=='10'){
        if(question.answerFlag){
          questionClass = 'question-answer';
        }
      }
      return questionClass;
    },
    scrollToQuetion(index,questionIndex){
      let qIndex = 'q'+index+'_'+questionIndex;
      let question = document.getElementById(qIndex);
      if (question) {
        question.scrollIntoView({ behavior: 'smooth' });
      }
    },
    //倒计时
    countdown(endTime) {
      const end = Date.parse(new Date(endTime));
      const now = Date.parse(new Date());
      const msec = end - now;
      //console.log(msec);
      if(msec<0){ 
        //过期60秒内自动提交
        if(msec>-60000){
          clearInterval(this.timerId)
          this.submitForm();
        }
        this.countdownTime = "考试时间已结束";
        return
      };
 
      let day = parseInt(msec / 1000 / 60 / 60 / 24);
      let hr = parseInt(msec / 1000 / 60 / 60 % 24);
      let min = parseInt(msec / 1000 / 60 % 60);
      let sec = parseInt(msec / 1000 % 60);
      let formatday =  day > 0? day+":":"";
      let formathr = hr > 9 ? hr+":" : hr > 0?'0' + hr+":":day>0?"00:":"";
      let formatmin = min > 9 ? min : '0' + min;
      let formatsec = sec > 9 ? sec : '0' + sec;
      this.countdownTime = formatday+formathr+formatmin+":"+formatsec;
      const that = this
      if(day>=0&&hr>=0&&min>=0 && sec>=0){
        //倒计时结束关闭
        if(day==0&&hr==0&&min==0 && sec==0){
          return
        }
        this.timerId = setTimeout(function () {
          that.countdown(endTime)
        }, 1000)
      }
    },
  }
};
</script>
